<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="24">
        <div style="height: 4em;line-height: 4em;float: left">
          <IconFont v-if="serverBaseInfo.systemType == 'Windows'" value="#icon-windows"></IconFont>
          <IconFont v-if="serverBaseInfo.systemType == 'CentOS Linux'" value="#icon-ziyuan"></IconFont>
        </div>
        <div style="height: 4em;line-height: 4em;float: left;margin-left: 1em">
          <h1>{{serverBaseInfo.systemName}}</h1>
        </div>

        <div style="height: 4em;line-height: 4em;float: left;margin-left: 1em">
          <Tag v-if="serverBaseInfo.onlineStatus == '1'" color="success">{{dictObject.onlineStatus[serverBaseInfo.onlineStatus]}}</Tag>
          <Tag v-if="serverBaseInfo.onlineStatus == '0'" color="error">{{dictObject.onlineStatus[serverBaseInfo.onlineStatus]}}</Tag>
        </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down">
      <Row style="height: 4em;line-height: 4ex;">
        <Col span="4">
          <span style="font-size: 14px;font-weight: bold">Key：</span><span>{{serverBaseInfo.id}}</span>
        </Col>
        <Col span="3">
          <span style="font-size: 14px;font-weight: bold">系统类型：</span><span>{{serverBaseInfo.systemType}}</span>
        </Col>
        <Col span="5">
          <span style="font-size: 14px;font-weight: bold">系统版本：</span><span>{{serverBaseInfo.systemVersion}}</span>
        </Col>
        <Col span="5">
          <span style="font-size: 14px;font-weight: bold">Cpu信息：</span><span>{{serverBaseInfo.cpuInfo}}</span>
        </Col>
        <Col span="4">
          <span v-if="serverBaseInfo.onlineStatus == '1'" style="font-size: 14px;font-weight: bold">启动时间：</span><span v-if="serverBaseInfo.onlineStatus == '1'">{{serverBaseInfo.startTime}}</span>
          <span v-if="serverBaseInfo.onlineStatus == '0'" style="font-size: 14px;font-weight: bold">离线时间：</span><span v-if="serverBaseInfo.onlineStatus == '0'">{{serverBaseInfo.offlineDate}}</span>
        </Col>
        <Col span="3">
          <span style="font-size: 14px;font-weight: bold">IP：</span><span>{{serverBaseInfo.netIp}}</span>
        </Col>
      </Row>
      <Row :gutter="2">
        <Col span="8">
          <Card style="width: 100%">
            <div style="width: 20%;display: inline-block;text-align: left">
              <IconFont value="#icon--collect-cpu" style="width: 1.5em;height: 1.5em;"></IconFont>
              Cpu信息
            </div>
            <div style="width: 79%;display: inline-block;text-align: right">
              使用率：{{cpulist.length > 0 ? cpulist[0].usegeRate : 0}}%
            </div>
            <div id="cpuRealLine" style="height: 300px"></div>
          </Card>
        </Col>
        <Col span="8">
          <Card style="width: 100%">
            <div style="width: 20%;display: inline-block;text-align: left">
              <IconFont value="#icon-ram" style="width: 1.5em;height: 1.5em;"></IconFont>
              Ram信息
            </div>
            <div style="width: 79%;display: inline-block;text-align: right">
              总内存：{{ramList.length > 0 ? ramList[0].total : 0}} 剩余：{{ramList.length  > 0 ? ramList[0].available : 0}} 使用率：{{ramList.length  > 0 ? ramList[0].useRate : 0}}%
            </div>
            <div id="ramRealLine" style="height: 300px">

            </div>
          </Card>
        </Col>
        <Col span="8">
          <Card style="width: 100%">
            <div style="width: 20%;display: inline-block;text-align: left">
              <IconFont value="#icon-yingpan" style="width: 1.5em;height: 1.5em;"></IconFont>
              Disk信息
            </div>
            <div style="width: 79%;display: inline-block;text-align: right">
              总存储：{{diskInfo.diskSpace}} 剩余：{{diskInfo.diskSpaceFree}} 使用率：{{diskInfo.diskUseRate}}%
            </div>
            <div id="diskRealPie" style="height: 300px"></div>
          </Card>
        </Col>
      </Row>
      <Row style="margin-top: 2px">
        <Col span="24">
          <Card style="width: 100%">
            <div style="width: 50%;display: inline-block;text-align: left">
              <IconFont value="#icon-yingpan" style="width: 1.5em;height: 1.5em;"></IconFont>
              磁盘详细信息
            </div>
<!--            <div style="width: 49%;display: inline-block;text-align: right">-->
<!--              使用率：20%-->
<!--            </div>-->
            <div style="height: 200px">
              <Table :columns="diskColumns" :data="diskInfos" :stripe="true" :height="200"></Table>
            </div>
          </Card>
        </Col>
      </Row>
      <Row style="margin-top: 2px">
        <Col span="24">
          <Card style="width: 100%">
            <div style="width: 50%;display: inline-block;text-align: left">
              <IconFont value="#icon-jincheng" style="width: 1.5em;height: 1.5em;"></IconFont>
              进程列表
            </div>
            <!--            <div style="width: 49%;display: inline-block;text-align: right">-->
            <!--              使用率：20%-->
            <!--            </div>-->
            <div style="height: 300px">
              <Table :columns="processColumns" :data="processInfos" :stripe="true" :height="300"></Table>
            </div>
          </Card>
        </Col>
      </Row>
    </Row>
  </div>
</template>
<script>
  import '../../../style/server/server_detail_info.scss';
  import {getServerBaseInfoAndRunInfoById,listCpuTop,listRamTop,getDiskUseInfo,listDiskInfos,listProcess} from "../../../api/sys/server/serverDetailInfo";
  import {mapState} from "vuex";

  export default {
    name: "sysServerDeteilInfo",
    computed:{
      ...mapState([
        'routerParame',
        'dictObject',
        'dictArray'
      ])
    },
    data(){
      return {
        cpulist:[],
        ramList:[],
        serverBaseInfo:{},
        diskInfo:{},
        diskInfos:[],
        processInfos:[],
        diskColumns:[
          {
            title: "磁盘名称",
            key: "diskName"
          },
          {
            title: "磁盘地址",
            key: "diskMount"
          },
          {
            title: "磁盘标签",
            key: "diskLabel"
          },
          {
            title: "磁盘空间",
            key: "diskSpace"
          },
          {
            title: "剩余空间",
            key: "diskSpaceFree"
          },
          {
            title: "文件类型",
            key: "diskType"
          },
          {
            title: "磁盘描述",
            key: "diskDescription"
          },
          {
            title: "使用率(%)",
            key: "diskUseRate"
          },
        ],
        processColumns:[
          {
            title: "进程名称",
            key: "name"
          },
          {
            title: "进程用户",
            key: "user"
          },
          {
            title: "线程数量",
            key: "threadCount"
          },
          {
            title: "Cpu占用(%)",
            key: "processCpuLoadCumulative"
          },
          {
            title: "内存占用",
            key: "residentSetSize"
          },
          {
            title: "启动时间",
            key: "startTime"
          },
          {
            title: "读",
            key: "bytesRead"
          },
          {
            title: "写",
            key: "bytesWritten"
          },
        ],
        cpuRealLineChart:Object,
        ramRealLineChart:Object,
        diskChart:Object,
        intervalId: null,
        intervalId2: null
      };
    },
    mounted() {
      this.initCharts();

      this.getServerBaseInfo();
      this.listRealCpus();
      this.listRealRams();
      this.getDiskInfo();
      this.listDisks();
      this.getProcessInfos();

      this.intervalId = setInterval(() => {
        this.getServerBaseInfo();
        this.listRealCpus();
        this.listRealRams();
      }, 2000);
      this.intervalId2 = setInterval(() => {

        this.getDiskInfo();
        this.listDisks();
        this.getProcessInfos();
      }, 10000);
    },
    destroyed() {
      this.cpuRealLineChart.dispose();
      this.ramRealLineChart.dispose();
      this.diskChart.dispose();
      clearInterval(this.intervalId);
      clearInterval(this.intervalId2);
    },
    methods:{
      initCharts(){
        this.cpuRealLineChart = this.$echarts.init(document.getElementById("cpuRealLine"));
        this.ramRealLineChart = this.$echarts.init(document.getElementById("ramRealLine"));
        this.diskChart = this.$echarts.init(document.getElementById("diskRealPie"));
      },
      /**
       * 获取Cpu使用实时数据
       */
      listRealCpus() {
        listCpuTop(this.routerParame).then(result =>{
          this.cpulist = result.data;
          this.initCpuCharts();
        })
      },
      /**
       * 获取Ram使用实时数据
       */
      listRealRams() {
        listRamTop(this.routerParame).then(result =>{
          this.ramList = result.data;
          this.initRamCharts();
        })
      },
      /**
       * 获取磁盘使用情况
       */
      getProcessInfos() {
        listProcess(this.routerParame).then(result =>{
          this.processInfos = result.data;
        })
      },
      /**
       * 获取磁盘使用情况
       */
      getDiskInfo() {
        getDiskUseInfo(this.routerParame).then(result =>{
          this.diskInfo = result.data;
          this.initDiskCharts();
        })
      },
      /**
       * 获取磁盘使用情况
       */
      listDisks() {
        listDiskInfos(this.routerParame).then(result =>{
          this.diskInfos = result.data;
        })
      },
      /**
       * 获取服务器基本信息
       */
      getServerBaseInfo(){
        getServerBaseInfoAndRunInfoById(this.routerParame).then(result =>{
          this.serverBaseInfo = result.data;
        })
      },
      initCpuCharts() {
        let xData = [];
        let yData = [];
        for (let i = 0; i < this.cpulist.length; i++) {
          xData.push(this.cpulist[i].createTime);
          yData.push(this.cpulist[i].usegeRate)
        }
        this.cpuRealLineChart.setOption({
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
          },
          yAxis: {
            type: 'value',
            max: 100,
            min : 0
          },
          grid: {
            left: "5%",
            right: "3%",
            top: 30,
            bottom: 30,
          },
          series: [{
            data: yData,
            type: 'line',
            smooth: 0.2,
            lineStyle:{
              opacity: 0
            },
            itemStyle: {
              opacity: 0
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(255,12,22)'
              }, {
                offset: 1,
                color: 'rgb(46,121,255)'
              }]),
              opacity: 0.5
            }
          }]
        });
      },
      initRamCharts() {
        let xData = [];
        let yData = [];
        for (let i = 0; i < this.ramList.length; i++) {
          xData.push(this.ramList[i].createdTime);
          yData.push(this.ramList[i].useRate);
        }

        this.ramRealLineChart.setOption({
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
          },
          yAxis: {
            type: 'value',
            max: 100,
            min : 0
          },
          grid: {
            left: "5%",
            right: "3%",
            top: 30,
            bottom: 30,
          },
          series: [{
            data: yData,
            type: 'line',
            smooth: 0.2,
            lineStyle:{
              opacity: 0
            },
            itemStyle: {
              opacity: 0
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(255,12,22)'
              }, {
                offset: 1,
                color: 'rgb(46,121,255)'
              }]),
              opacity: 0.5
            }
          }]
        });
      },
      initDiskCharts(){
        this.diskChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              type: 'pie',
              avoidLabelOverlap: false,
              radius: ['40%', '80%'],
              itemStyle: {
                borderRadius: 5,
              },
              labelLine: {
                show: true
              },
              label: {
                show: true,
              },
              data: [
                {value: this.diskInfo.diskUseRate, name: '已用'},
                {value: 100 - this.diskInfo.diskUseRate, name: '剩余'},
              ]
            }
          ]
        });
      }
    }
  }
</script>
